<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GAME</title>
    <script src="https://keepcodeing.github.io/InfectedZer-S/jquery.min.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .outbox{
            position: relative;
            background: black;
            height: 500px;
            width: 100%;
            margin: 60px auto;
        }
        .ball{
            position: absolute;
            background: white;
            height: 70px;
            width: 70px;
            border: 1px solid red;
            border-radius: 50%;
            top:100px;
            left: 1000px;
        }
        .box{
            position: absolute;
            background: yellow;
            height: 90px;
            width: 90px;
            top: 100px;
        }
    </style>
    <script>
        $(function () {
            var boxpos=[];
            var ballpos=[];
            var $ball=$(".ball");
            var $box=$(".box");
            var flag=true;
            //不断获取球体位置
			var spawnball={
				add:function(){
					$(".outbox").append("<div class=\"ball\"></div>");
				},
				randompos:function(){
					var pos=[];
					pos[0]=Math.random()*400+1; //随机生成top位置
					pos[1]=Math.random()*3+1;	//随机生成移动秒数
					return pos;
				},
				setpos:function(){
					var i=0;
					var posset=spawnball.randompos();
					var timer=setInterval(function(){	
						posset=spawnball.randompos();				
						spawnball.add();
						spawnball.clean();
						var getball=$(".ball");				
						getball.eq(i).animate({
							left:-10,
							top:posset[0]
						},posset[1]*1000);
						i++;
					},1500);	
				},
				clean:function(){
					var balllen=$(".ball").length;
					var ball=$(".ball");
					var ballleft;
					for(var i=0;i<balllen;i++){
						ballleft=ball.eq(i).position().left;
						if(ballleft<0){
							balleq(i).remove();	
						}
					}
				}	
			};
			spawnball.setpos();
            /*var balltimer=setInterval(function () {
				spawnball.add();
                var a=$ball.position().left;
                var b=$ball.position().top;
                var c=$ball.width();
                var d=$ball.height();

                var ballright=a+c;//球体右边
                var ballbottom=b+d;//球体底部
                var balltop=b;//顶
                var ballleft=a;//左

                ballpos[0]=balltop;
                ballpos[1]=ballbottom;
                ballpos[2]=ballleft;
                ballpos[3]=ballright;

                $ball.css({
                    left:a-1
                });

            },60);*/


            //不断获取盒子位置
            var boxtimer=setInterval(function () {
                var e=$box.position().left;
                var f=$box.position().top;
                var g=$box.width();
                var h=$box.height();

                var boxleft=e;//左
                var boxright=e+g;//盒子右边
                var boxtop=f;//盒子顶部
                var boxbottom=f+h;//底

                boxpos[0]=boxtop;
                boxpos[1]=boxbottom;
                boxpos[2]=boxleft;
                boxpos[3]=boxright;
                //deadcheck.check();
            },60);

            var key;
            var deadcheck={
                check:function  (){
                    if(boxpos[0]<=ballpos[1]&&boxpos[1]>=ballpos[0]&&boxpos[2]<=ballpos[3]&&boxpos[3]>=ballpos[2]){
                        //alert("");
                        //clearInterval(boxtimer);
                        //clearInterval(balltimer);
						var height=$box.height();
						var width=$box.width();
						$box.animate({
							width:width+20,
							height:height+20
							},100);
						$ball.remove();
						
                    }
                }
            };
            var outcheck={
                topout:function (){
                    if(boxpos[0]<=0){
                        $box.css({
                            top:0
                        });
                    }
                },
                leftout:function () {
                    if(boxpos[2]<=0){
                        $box.css({
                            left:0
                        });
                    }
                },
                rightout:function () {
                    if(boxpos[2]>=1830){
                        $box.css({
                            left:1830
                        });
                    }
                },
                bottomout:function () {
                    if(boxpos[0]>=410){
                        $box.css({
                            top:410
                        });
                    }
                }

            };
            $(document).keydown(function (e) {
                if(flag===true){
                    key=e.keyCode;
                    switch(key){
                        case 87:
                            $box.css({
                                top:boxpos[0]-20
                            });
                            outcheck.topout();
							deadcheck.check();
                            break;
                        case 83:
                            $box.css({
                                top:boxpos[0]+20
                            });
                            outcheck.bottomout();
							deadcheck.check()
                            break;
                        case 65:
                            $box.css({
                                left:boxpos[2]-20
                            });
                            outcheck.leftout();
							deadcheck.check()
                            break;
                        case 68:
                            $box.css({
                                left:boxpos[2]+20
                            });
                            outcheck.rightout();
							deadcheck.check()
                            break;
                    }
                }
            })
        });
    </script>
</head>

<body>
<div class="outbox">	
	
    <div class="box"></div>
</div>

</body>
</html>
